<template>
  <div class="short">
    <van-list v-model="loading" :finished="finished" @load="onLoad">
      <div class="shortList">
        <div class="short-item" v-for="(item,index) in ShortList" :key="index">
          <div class="short-item-img">
            <img :src="item.images[0].url" width="100%" height="100%" alt="暂无图片" />
          </div>
          <div class="play-btn" @touchend="GoShortVideo(item)"></div>
          <div class="title">{{item.title.substring(0,25) +(item.title.length>25?'...':'')}}</div>
          <div class="short-info">
            <img class="user-avatar" :src="item.user.avatarurl" width="21.5px" height="21.5px" alt />
            <div
              class="user-name"
            >{{item.user.nickName.substring(0,6)+(item.user.nickName.length>6?'...' :'')}}</div>
            <img
              class="like-img"
              src="https://p1.meituan.net/moviemachine/5377c2c03dacf20b6e286e3e72dd57911272.png@80q"
              width="18px"
              height="18px"
              alt
            />
            <div class="like-count">{{item.upCount}}</div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
export default {
  name: "short",
  data() {
    return {
      ShortList: [],
      offset: 0,
      loading: false,
      finished: false
    };
  },
  created() {},
  methods: {
    onLoad() {
      if (this.offset <= 10) {
        this.loading = false;
        this.GetShort();
        this.offset += 10;
      } else {
        this.loading = true;
        this.finished = true;
      }
    },
    GetShort() {
      this.axios({
        method: "get",
        url: "video/short/" + this.offset
      }).then(ref => {
        this.ShortList.push(...ref.data.data.feeds);
      });
    },
    GoShortVideo(Video) {
      console.log(Video);
    }
  }
};
</script>
<style lang="less" scoped>
.shortList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .short-item {
    width: 49.7%;
    position: relative;
    .short-item-img {
      height: 300px;
      // background-position: 50%;
      background-size: cover;
    }
    .play-btn {
      z-index: 10;
      position: absolute;
      left: 50%;
      top: 50%;
      width: 1.16rem;
      height: 1.16rem;
      margin-left: -0.58rem;
      margin-top: -0.58rem;
      background-image: url(//s0.meituan.net/bs/myfe/canary/file/asgard/images/media/video-btn-play.png);
      background-size: contain;
    }
    .title {
      font-size: 14px;
      position: absolute;
      -webkit-box-orient: vertical;
      line-height: 0.42rem;
      text-shadow: 0 0 3px rgb(0 0 0 / 30%);
      -webkit-line-clamp: 2;
      overflow: hidden;
      bottom: 12%;
      width: 100%;
      color: #fff;
    }
    .short-info {
      color: #fff;
      align-items: center;
      display: flex;
      width: 100%;
      position: absolute;
      bottom: 3%;
      .user-avatar {
        margin: 0 10px;
        opacity: 0.9;
        border: 0 solid rgba(42, 42, 42, 0.05);
        border-radius: 50%;
      }
      .user-name {
        line-height: 22px;
        width: 90px;
        display: inline-block;
        overflow: hidden;
      }
      .like-img {
        margin-right: 5px;
      }
    }
  }
}
</style>